<template>
  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane label="概况" name="first">
      <div id="main" style="width: 600px;height: 400px;"></div>
    </el-tab-pane>
    <el-tab-pane label="表格概况" name="second">
      <div id="main1" style="width: 1000px;height: 500px;"></div>
    </el-tab-pane>
  </el-tabs>
</template>

<script setup lang="ts">
import { ref, reactive,watch,onMounted } from "vue";
import type { TabsPaneContext } from "element-plus";
import * as echarts from 'echarts'

const apiUrl = import.meta.env.VITE_APP_API_URL;
const apiBedinUrl = import.meta.env.VITE_APPRead_API_URL;

let myChart:any;
let myChart1:any;
onMounted(() => {
  // 基于准备好的dom，初始化echarts实例
 myChart = echarts.init(document.getElementById('main'));
 myChart1 = echarts.init(document.getElementById('main1'));
// 绘制图表
myChart.setOption({
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['配种种母数', '分娩种母数', '配种分娩率']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '配种种母数',
      type: 'line',
      stack: 'Total',
      data: [0, 0, 0, 0,0, 0, 0, 0, 0,0, 0,0]
    },
    {
      name: '分娩种母数',
      type: 'line',
      stack: 'Total',
      data: [0, 0, 0, 0,0, 0, 0, 0, 0,0, 0,0]
    },
    {
      name: '配种分娩率',
      type: 'line',
      stack: 'Total',
      data: [0, 0, 0, 0,0, 0, 0, 0, 0,0, 0,0]
    }
  ]
});
myChart1.setOption({
  title: {
    text: '种母状态分布',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: '待配种' },
        { value: 735, name: '待首次妊娠' },
        { value: 580, name: '待二次妊检' },
        { value: 484, name: '待上产床' },
        { value: 300, name: '待分娩' },
        { value: 200, name: '种母待断奶' },
        { value: 100, name: '妊娠换料' },
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
})
console.log('ECharts 入门示例')

})

// do not use same name with ref
const form = reactive({
  date1: "",
  date2: "",
});
const activeName = ref("first");

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
</script>

<style>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>
